<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px">
      <FilterForm ref="filterForm" :elements="filterElements" @submit="handleSearch" @reset="handleReset">
        <Button
          style="display: inline-block;"
          @click="handleExport"
        >导出</Button>
      </FilterForm>
    </Container>
    <Container height="fill" :scroll-y="true" display="flexY">
      <OperationContainer style="margin-bottom: 10px">
        <!-- <Button style="margin-right: 12px" @click="actionUnfoldFunc(true)"
          >导出</Button
        > -->
      </OperationContainer>
      <el-table
        ref="ctab"
        v-loading="tableLoading"
        :data="tableData"
        border
        :header-cell-style="{ background: '#fafafa', borderColor: '#e7ecf8',textAlign:'center' }"
        header-row-class-name="ck-table-header"
        row-class-name="ck-table-row"
        size="small"
        row-key="code"
        height="100%"
      >
        <el-table-column label="基本信息" align="center" width="270">
          <el-table-column align="center" type="index" label="序号" width="50" />
          <el-table-column prop="name" label="项目" width="80" />
        </el-table-column>
        <el-table-column label="收入" align="center">
          <el-table-column prop="currentInCome" label="本期" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.currentInCome | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalInCome" label="累计" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalInCome | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="成本" align="center">
          <el-table-column prop="currentCost" label="本期" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.currentCost | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalCost" label="累计" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalCost | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="收益" align="center">
          <el-table-column prop="currentSurplus" label="本期" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.currentSurplus | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalSurplus" label="累计" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalSurplus | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="财政补贴" align="center">
          <el-table-column prop="currentSubsidy" label="本期" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.currentSubsidy | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalSubsidy" label="累计" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalSubsidy | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="未纳入成本项" align="center">
          <el-table-column prop="currentCount" label="本期" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.currentCount | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalCount" label="累计" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalCount | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="收支结余" align="center">
          <el-table-column prop="currentFinancial" label="本期" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.currentFinancial | numberToCurrency }}
            </template>
          </el-table-column>
          <el-table-column prop="totalFinancial" label="累计" width="140" align="right">
            <template slot-scope="scope">
              {{ scope.row.totalFinancial | numberToCurrency }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- <div class="pagenation-box">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div> -->
    </Container>
  </ContainerGroup>
</template>

<script>
import { listCountInCome, download4 } from '@/utils/apis/report'
export default {
  name: 'GrantInAid',
  data() {
    return {
      filterElements: [
        {
          key: 'yearMonth',
          label: '年/月',
          mode: 'monthrange',
          type: 'date-picker',
          format: 'yyyy-MM',
          value: [this.$util.currentDate(), this.$util.currentDate()],
          width: 340
        }
        // {
        //   key: "aihao",
        //   type: "Select",
        //   label: "院区",
        //   value: "",
        //   width: 210,
        //   options: [
        //     {
        //       label: "全部",
        //       value: "1",
        //     },
        //     {
        //       label: "浒关院区",
        //       value: "2",
        //     },
        //     {
        //       label: "三香院区",
        //       value: "3",
        //     },
        //   ],
        // },
      ],
      pageAttr: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      tableData: [],
      tableLoading: false,
      newParamList: {}
    }
  },
  created() { },
  mounted() { },
  methods: {
    handleExport() { // 导出
      const fieldVal = this.$refs.filterForm.getParms()
      const startYearMonth = fieldVal?.yearMonth[0]
      const endYearMonth = fieldVal?.yearMonth[1]
      const currentYear = new Date(startYearMonth).getFullYear()
      const currentMonth = new Date(startYearMonth).getMonth() + 1

      const endcurrentYear = new Date(endYearMonth).getFullYear()
      const endcurrentMonth = new Date(endYearMonth).getMonth() + 1
      const param = {
        endYear: endcurrentYear,
        endMonth: endcurrentMonth,
        startMonth: this.formatNumber(currentMonth),
        startYear: currentYear,
        yard: '1'
      }
      download4(param).then(res => {
        const blob = new Blob([res.data], {
          type: res.data.type + 'charset=utf-8'
        })
        const downloadLink = document.createElement('a')
        const URL = window.URL || window.webkitURL || window.moxURL
        const downUrl = URL.createObjectURL(blob)
        downloadLink.href = downUrl
        downloadLink.download = '收益总表（财政补贴）.xlsx'
        downloadLink.click()
        window.URL.revokeObjectURL(downUrl)
        // document.body.removeChild(downloadLink) // 删除 a 标签
      })
    },
    handleSearch(value) {
      this.newParamList = value
      this.pageAttr.currentPage = 1
      this.getData()
    },
    handleReset() {
      location.reload()
    },
    createNewData() { },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.pageNum = val
    },
    getData() {
      // 列表
      const startYearMonth =
        this.newParamList.yearMonth && this.newParamList.yearMonth[0]
      const endYearMonth =
        this.newParamList.yearMonth && this.newParamList.yearMonth[1]
      const currentYear = new Date(startYearMonth).getFullYear()
      const currentMonth = new Date(startYearMonth).getMonth() + 1

      const endcurrentYear = new Date(endYearMonth).getFullYear()
      const endcurrentMonth = new Date(endYearMonth).getMonth() + 1
      const param = {
        endYear: endcurrentYear,
        endMonth: endcurrentMonth,
        startMonth: this.formatNumber(currentMonth),
        startYear: currentYear,
        yard: '1'
      }
      if (currentYear !== endcurrentYear) {
        this.$message.warning('不能选择跨年时间段')
        return
      }
      this.tableLoading = true
      this.tableData = []
      listCountInCome(param).then((res) => {
        this.tableLoading = false
        if (res.data.code === 200) {
          this.tableData = res.data.data
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    formatNumber(n) {
      n = n.toString()
      return n[1] ? n : `0${n}`
    }
  }
}
</script>

<style lang="less" scoped>
.el-table--mini,
.el-table--small,
.el-table__expand-icon {
  font-size: 14px !important;
}

.ck-table-header {
  th {
    background: #fafafa !important;
    height: 48px;
    color: #555555 !important;
  }
}

.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}

.text-btn {
  color: #2165f9;
  border-bottom: 1px solid #2165f9;
  display: inline-block !important;
  cursor: pointer;
}
</style>
